<template>
	<div class="setting-page w-full h-full">
		<!-- <ly-tools-bar /> -->
		<!-- 设置 -->
		<div class="setting w-full h-full flex items-center justify-center flex-col p-3">
			<!-- 头像设置 -->
			<div class="setting-item flex flex-col items-center justify-center">
				<img
					alt="avatar"
					:src="settingStore.settingConfig.avatar"
					class="w-16 h-16 rounded-full shadow-lg" />
				<span class="text-sm mt-3 text-blue-800 cursor-pointer" @click="changeAvatar">
					更换头像
				</span>
				<input
					max="1"
					type="file"
					class="hidden"
					ref="selectImg"
					accept="image/*"
					@change="setAvatar" />
			</div>
			<!-- 云端同步 URL 设置 -->
			<div class="setting-item flex h-10 flex-col mt-5">
				<span class="text-xs text-gray-700 dark:text-gray-400">云端同步地址</span>
				<div class="w-80">
					<ly-input
						:height="30"
						:font-size="14"
						placeholder="请输入云端同步API地址"
						v-model="settingStore.settingConfig.cloudSyncUrl" />
				</div>
			</div>
			<!-- 云端同步密码 -->
			<div class="setting-item flex h-10 flex-col mt-5">
				<span class="text-xs text-gray-700 dark:text-gray-400">云端同步安全密码</span>
				<div class="w-80">
					<ly-input
						type="password"
						:height="30"
						:font-size="14"
						placeholder="请输入云端同步安全密码"
						v-model="settingStore.settingConfig.safePassword" />
				</div>
			</div>
			<div class="setting-item flex h-10 flex-col mt-5">
				<ly-button text="保存设置" type="primary" @click="settingStore.handleSaveSetting" />
			</div>
		</div>
	</div>
</template>

<script name="Setting" lang="ts" setup>
import { useSettingStore } from '@/stores/settingStore';

const settingStore = useSettingStore();

// 更换头像
const selectImg = useTemplateRef<HTMLInputElement>('selectImg');
const changeAvatar = (): void => {
	selectImg.value?.click();
};
const setAvatar = (e: any): void => {
	const file = e.target?.files?.[0];
	// 转为 Base64
	const reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = (e) => {
		settingStore.settingConfig.avatar = e.target?.result + '';
		settingStore.handleSaveSetting();
	};
};
</script>
